import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter, BrowserRouter, Route, Link, Redirect, withRouter, NavLink, Switch } from 'react-router-dom'
import Home from './views/home'
import About from './views/about'
import List from './views/list'
/* 
  <Route></Route> 类似于 vue的 router-view
  <Link></Link>  类似于 vue 的  router-link
  编程式导航： 只有哪些通过 Route渲染出来的组件 才能获取到路由相关的参数
              不是Route渲染的组件 可以通过withRouter处理组件
              这时 我们可以通过this.props.history.push/replace进行导航
  query 原生的传参       
  params 路径传参 类似于vue; 获取的时候 this.props.match.params 
  state 传参 目前谷歌刷新不会丢失    

*/
class App extends React.Component {
  go = () => {
    console.log(this.props)
    this.props.history.push('/about', { q: 123, w: 234 })
  }
  render() {
    return <div className=''>
      {/* <Link to='/home'>首页</Link>
      <Link to='/about'>关于页</Link> */}
      <NavLink to='/home'>首页</NavLink>
      <NavLink to={'/home?' + 'a=122&b=234'}>首页</NavLink>
      <NavLink to='/about'>关于页</NavLink>
      <NavLink to='/list/345234'>列表页</NavLink>
      <NavLink to='/list/1231313'>列表页</NavLink>

      <button onClick={this.go}>2s去首页</button>

      {/* <Redirect exact path='/' to='/home'></Redirect> */}
      <Switch>
        <Route path='/' exact render={(props) => {
          console.log('redirect')
          return <Redirect to='/home'></Redirect>
        }}></Route>
        <Route path='/home' component={Home}></Route>
        {/* 当路径能够匹配上 /home的时候 会把这一行选染成Home组件 不匹配则啥也不渲染 */}
        <Route path='/about' component={About} ></Route>
        <Route path='/list/:id' component={List}></Route>
        <Route path='/*' render={() => <h1>404</h1>}></Route>
      </Switch>
    </div>;
  }
}
App = withRouter(App)
ReactDOM.render(<BrowserRouter>
  <App />
</BrowserRouter>, document.getElementById('root'))